<template>
	<view class="staffRegister">
		<f-navbar title="社会单位员工注册" :iconLeft="true" :isBack="true" @goBack="goBack" />
		<view class="staffRegister-header-state ff-align-items ff-text-center">
			<view class="staffRegister-header-state-box">
				<image class="ff-margin-bottom-6"
					src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/step-1.png" mode="">
				</image>
				<view class="ff-font-12">员工信息</view>
			</view>
			<view class="staffRegister-header-state-line"></view>
			<view class="staffRegister-header-state-box">
				<image class="ff-margin-bottom-6 step-number"
					src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/step-2.png" mode="">
				</image>
				<view class="ff-font-12">完成，待审核</view>
			</view>
		</view>
		<view class="staffRegister-content">
			<view class="staffRegister-content-one ff-bg-fff ff-font-14 ff-margin-12 ff-border-radius-10">
				<view class="ff-font-weight-600 ff-font-17 ff-margin-bottom-5">
					{{ staffRegister.companyStaff.companyName }}
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="staffRegister-content-one-title">员工姓名</view>
					<input class="ff-text-right" type="text" v-model.trim="staffRegister.username" placeholder="请输入"
						placeholder-style="color:#999" />
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="staffRegister-content-one-title">员工手机号码</view>
					<input class="ff-text-right" type="number" maxlength="11" v-model.trim="staffRegister.phone"
						placeholder="请输入" placeholder-style="color:#999" />
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="staffRegister-content-one-title">验证码</view>
					<view class="ff-align-items-one">
						<input maxlength="10" type="number" v-model.trim="staffRegister.validCode" placeholder="请输入"
							placeholder-style="color:#999" />
						<view>
							<view @click="getVerifyPhone" v-if="validCodeList.disableValidCode"
								class="ff-color-confirm">{{ validCodeList.validCodeText }}</view>
							<view v-else class="ff-color-cancel">{{ validCodeList.validTimeText }}</view>
						</view>
					</view>
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="staffRegister-content-one-title">设置密码</view>
					<input class="ff-text-right" type="password" v-model.trim="staffRegister.password" placeholder="请输入"
						placeholder-style="color:#999" />
				</view>
				<view class="ff-flex-between ff-border-bottom">
					<view class="staffRegister-content-one-title">再次输入密码</view>
					<input class="ff-text-right" type="password" v-model.trim="confirmPassword" placeholder="请输入"
						placeholder-style="color:#999" />
				</view>
			</view>
			<view class="staffRegister-content-but">
				<view class="staffRegister-content-but-box"><u-button type="primary" shape="circle"
						@click="submitClick">提交</u-button></view>
				<view class="staffRegister-content-but-tips ff-margin-top-20">
					已有账号？
					<text @click="LoginClick">点我登录</text>
				</view>
			</view>
		</view>
		<!-- 返回上一层弹框 -->
		<u-modal v-model="infoModal" :show-cancel-button="true" @confirm="confirmInfo" title="温馨提示"
			:content-style="{ 'line-height': '1.5' }" content="退出后, 您填写的内容将不会被保存" />
		<f-loading ref="loading" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		name: 'staffRegister',
		data() {
			return {
				infoModal: false, // 消息提示弹框的显/隐
				// 倒计时系列内容
				validCodeList: {
					validCodeText: '获取验证码', // 获取验证码
					validTimeText: '60秒', // 倒计时文案
					disableValidCode: true, // 按钮是否可以点击
					count: 60, // 倒计时秒数
					timer: null // 定时器
				},
				confirmPassword: '', // 再次输入密码确认
				staffRegister: {
					regType: 11, // 注册类型(1:社会单位注册 2:服务机构注册 11:社会单位员工注册 21:服务机构员工注册 31:维保专家注册)
					companyStaff: {}, // 社会单位员工注册对象
					username: '', // 用户名称
					phone: '', // 手机号码(登录手机号码)
					validCode: '', // 手机验证码(注册手机验证码)
					password: '' // 登录密码
				}
			};
		},
		onLoad(e) {
			// console.log('前页面传过来的数据------', JSON.parse(e.companyStaff));
			this.staffRegister.companyStaff = JSON.parse(e.companyStaff);
			this.staffRegisterLenghth = JSON.stringify(this.staffRegister).length
		},
		methods: {
			// 返回上一层页面
			goBack() {
				if (JSON.stringify(this.staffRegister).length != this.staffRegisterLenghth) {
					this.infoModal = true;
				} else {
					this.$pageJump.navigateBack();
				}
			},
			// 返回上一层--确认按钮
			confirmInfo() {
				this.$pageJump.navigateBack();
			},
			// 点击获取短信验证码----验证手机号是否已注册
			getVerifyPhone() {
				if (this.$check.isMobile(this.staffRegister.phone)) {
					this.$refs.loading.openLoading('提交中···'); // 打开loading动画
					this.$http
						.get({
							url: `/sys/user/exist/${this.staffRegister.phone}`
						})
						.then(res => {
							// console.log('检验验证手机号是否已注册----', res);
							this.$refs.loading.closeLoading(); // 关闭loading动画
							if (res.code == 200 && res.data) {
								this.getValidCoded(); // 获取短信验证码
							} else {
								uni.showModal({
									title: '温馨提示',
									content: '该手机号已存在，无法注册。请使用新的手机号进行注册。',
									confirmColor: '#3178FF',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {}
									}
								})
							}
						});
				} else {
					this.$refs.uToast.show({
						title: '请输入正确管理员手机号码',
						type: 'error'
					});
				}
			},
			// 点击获取短信验证码----发送短信验证码
			getValidCoded() {
				this.$refs.loading.openLoading('提交中···'); // 打开loading动画
				this.$http
					.get({
						url: `/sys/user/sendRegCode/${this.staffRegister.phone}`
					})
					.then(res => {
						// console.log('获取短信验证码----', res);
						if (res.code == 200 && res.data) {
							this.$refs.uToast.show({
								title: '验证码发送成功',
								type: 'success'
							});
							this.validCodeList.count = 60;
							this.validCodeList.disableValidCode = false;
							this.validCodeList.timer = setInterval(() => {
								if (this.validCodeList.count > 0 && this.validCodeList
									.count <= 60) {
									this.validCodeList.validTimeText = this
										.validCodeList.count + '秒';
									this.validCodeList.count--;
								} else {
									this.validCodeList.disableValidCode = true;
									this.validCodeList.validCodeText = '重新获取';
									this.validCodeList.validTimeText = '60秒';
									clearInterval(this.validCodeList.timer);
									this.validCodeList.timer = null;
								}
							}, 1000);
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
						this.$refs.loading.closeLoading(); // 关闭loading动画
					});
			},

			submitClick() {
				if (this.staffRegister.username == '') {
					this.$refs.uToast.show({
						title: '请输入员工姓名',
						type: 'error'
					});
					return;
				}
				if (!this.$check.isMobile(this.staffRegister.phone)) {
					this.$refs.uToast.show({
						title: '请输入正确的员工手机号',
						type: 'error'
					});
					return;
				}
				if (this.staffRegister.validCode == '') {
					this.$refs.uToast.show({
						title: '请输入验证码',
						type: 'error'
					});
					return;
				}
				if (this.staffRegister.password == '') {
					this.$refs.uToast.show({
						title: '请输入密码',
						type: 'error'
					});
					return;
				}
				if (this.staffRegister.password != this.confirmPassword) {
					this.$refs.uToast.show({
						title: '两次密码不一致，请重新输入',
						type: 'error'
					});
					return;
				}
				this.$refs.loading.openLoading('注册中···'); // 打开loading动画
				this.$http
					.post({
						url: '/sys/user/regV3',
						data: this.staffRegister
					})
					.then(res => {
						// console.log('注册返回的结果-----', res);
						if (res.code == 200 && res.success) {
							this.$pageJump.reLaunch(
								'/pages/loginRegister/register/socialUnit/staff/staffRegisterTwo?companyName=' +
								this.staffRegister.companyStaff.companyName);
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
						this.$refs.loading.closeLoading(); // 关闭loading动画
					});
			},
			// 点击跳转到登录页面
			LoginClick() {
				this.$pageJump.navigateTo('/pages/loginRegister/login/Login');
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #e6f2fe;
	}

	.staffRegister {
		&-header-state {
			background-color: #e6f2fe;
			position: fixed;
			top: 8.8%;
			left: 0;
			z-index: 11;
			width: 100%;
			justify-content: space-between;
			padding: 50rpx 15%;
			color: #6d7c99;

			&-box {
				image {
					width: 50rpx;
					height: 50rpx;
				}

				.step-number {
					width: 40rpx;
					height: 40rpx;
				}
			}

			&-line {
				width: 99rpx;
				height: 10rpx;
				background: #d2e5fa;
			}
		}

		&-content {
			margin-top: 190rpx;

			/deep/.u-icon {
				margin-left: 12rpx;
			}

			&-one {
				padding: 40rpx 26rpx 29rpx 26rpx;

				.ff-font-weight-600 {
					color: #0b204b;
				}

				.ff-border-bottom {
					padding: 40rpx 0;
					align-items: center;

					input {
						height: 28rpx;
						line-height: 1;
					}
				}

				&-title {
					color: #2a3c62;
				}

				.FaceBox {
					padding: 16rpx 19rpx;
					background-color: #0097ff;
					display: inline;
				}
			}

			&-but {
				padding: 120rpx 0 130rpx;
				margin: 0 6%;
				width: 88%;
				text-align: center;

				/deep/.u-size-default {
					height: 90rpx !important;
					line-height: 90rpx !important;
				}

				text {
					color: #3178ff;
				}
			}
		}
	}
</style>